<template>

	<view class="p_container">
		<view :style="{ paddingTop: navBarHeight + 'px' }"></view>
		<custom-navbar :showBack="false" title="我的" background="#F0A455" color="#ffffff" />

		<view class="head" @click="getLoginHandle" v-if="!useStore.openid">
			<image class="head_avatar" src="../../static/3_avatar.png" style="width: 108rpx;height: 108rpx" />
			<text
				style="padding-left: 16rpx;color: #ffffff;font-size: 30rpx;font-family: SourceHanSansSC-Regular">请登录</text>
		</view>
		<view class="head" v-else>
			<button style="margin:0;padding:0;height: 108rpx;border-radius: 50%;border: none;" type="default"
				open-type="chooseAvatar" @chooseavatar="chooseavatarHandler">
				<image style="border-radius: 50%;width: 108rpx;height: 100%;" class="head_avatar"
					:src="useStore.avatar?useStore.avatar:useStore.profile.avatarUrl"></image>
			</button>
			<input style="padding-left:28rpx;color: #ffffff;font-size: 30rpx;font-family:SourceHanSansSC-Regular"
				v-model="useStore.nickName" @blur="onNicknameInput" type="nickname" />
		</view>
		<!-- funlist -->
		<view class="fun_list_outside"  v-if="useStore.jugleCode!=10000">
			<view class="fun_list" v-for="(item,i) in funList" :key="i" @click="linkTo(i)">
				<view class="left">
					<!-- 				<image :src="item.url" style="width: 42rpx;height: 42rpx" mode="" /> -->
					<text style="padding-left:8rpx;color: #595757;font-size: 30rpx;">{{item.text}}</text>
				</view>
				<image src="/static/arrow.png" style="width: 11rpx;height: 22rpx" mode="" />
			</view>
		</view>



		<uni-popup ref="pop" type="center" :animation="false" background-color="#fff">
			<view class="" style="width:500rpx;">
				<view style="padding:30rpx;box-sizing: border-box;">
					<view class="agreement-title">用户协议及隐私政策</view>
				</view>
				<view style="padding:30rpx;display: flex; justify-content: space-between;">
					<up-button style="background: #c90514;color: #FFFFFF;" @click="sureHandler">一键授权登录</up-button>
				</view>
				<view class="agree_content">
					<view class="imagement">
						<image src="/static/checked.png" mode="" v-if="isChecked" @click="handleChecked(false)"></image>
						<image src="/static/unchecked.png" mode="" v-if="!isChecked" @click="handleChecked(true)">
						</image>
					</view>
					<view class="agreement">
						<text>已阅读并同意</text>
						<text style="color: #c90514;" @click='linkToProtocol(1)'>《螃蟹旅途钱包隐私保护协议》</text><text
							style="color: #c90514;" @click='linkToProtocol(2)'>《螃蟹旅途钱包用户服务协议》</text>
					</view>
				</view>
			</view>

		</uni-popup>

	</view>

</template>

<script setup>
	import {
		onReady
	} from "@dcloudio/uni-app"
	import {
		getUserInfo,
		loginHandle
	} from '../../utils';
	import CustomNavbar from '@/components/navbar.vue';
	import {
		loginApi
	} from "../../api/index.js";
	import {
		ref,
		reactive
	} from "vue";
	import {
		useMyStore
	} from '../../store'
	import {
		toast
	} from "../../uni_modules/uview-plus";
	import cellGroup from "../../uni_modules/uview-plus/components/u-cell-group/cellGroup";
	import {
		log
	} from "console";

	import {
		TipsShow
	} from "../../utils/common.js"

	const pop = ref(null)
	const isChecked = ref(uni.getStorageSync('isChecked') || false)

	// onReady(() => {
	// 	pop.value.open('center')
	// })


	const useStore = useMyStore();
	console.log('useStore----------->>>', useStore);

	const avatar = ref("");
	const isLogin = ref(true);
	const funList = ref([{
			id: '1',
			url: '/static/3_rewards_store.png',
			text: '积分商城',
			fn:TipsShow,
		},
		{
			id: '2',
			url: '/static/3_faq.png',
			text: '常见问题',
			fn:TipsShow,
		},
		{
			id: '3',
			url: '/static/3_customer_service.png',
			text: '联系客服',
			fn: () => {
				uni.navigateTo({
					url: "/pageA/service/service"
				})
			}
		},
		{
			id: '4',
			url: '/static/3_about_us.png',
			text: '关于我们',
			fn: () => {
				uni.navigateTo({
					url: '/pageA/linkJoy/linkJoy'
				});
			}
		}
	])

	const navBarHeight = ref(getApp().globalData.navBarHeight);
	console.log('navBarHeight', navBarHeight);

	const chooseavatarHandler = (e) => {
		console.log('chooseAvatar', e)
		console.log('e.target', e.target.avatarUrl)
		useStore.setAvatar(e.target.avatarUrl)
	}
	const onNicknameInput = (e) => {
		console.log('onNicknameInput-e', e);
		useStore.setNickname(e.detail.value || '微信用户')
		console.log('useStore.profile', useStore.profile);
	}

	const getLoginHandle = () => {
		// loginHandle()
		pop.value.open('center')
	}
	const linkTo = (e) => {
		if (funList.value[e] && funList.value[e]['fn']) {
			funList.value[e]['fn']()
		}

	}
	// const isOpen=()=>{
	// 	isLogin.value=true;
	// }

	const handleChecked = (bol) => {
		isChecked.value = bol
		uni.setStorageSync('isChecked', bol)
	}

	const sureHandler = async () => {
		if (!isChecked.value) {
			console.log('6666')
			toast('请先浏览并同意协议！')
			return
		}

		pop.value.close()
		// isLogin.value=false;
		let res1 = await getUserInfo();
		let res2 = await loginHandle();
		console.log('res1', res1);
		console.log('res2', res2);
		useStore.setProfile(res1.userInfo);
		let data = {
			"code": res2.code,
			"encryptedData": res1.encryptedData,
			"iv": res1.iv,
			"userInfo": JSON.stringify(res1.userInfo)
		}
		console.log('data:::', data);
		console.log('data:::', JSON.stringify(data));
		let res3 = await loginApi(data)
		console.log('res3', res3);
		if (res3.data.errcode == 200) {
			let obj = res3.data.data;
			console.log('obj-----------', obj);
			useStore.setOpenid(obj['openid']);
			useStore.setAccessToken(obj['access_token']);
			// useStore.setPhone(obj['phone']);
			useStore.setPhone(obj['user_id']);
			isLogin.value = false;
		}
	}

	const linkToProtocol = (type) => {
		console.log('gogogo')
		let url = ''
		switch (type) {
			case 1:
				url = '/pageA/loginprotocol/loginprotocol'
				break;
			case 2:
				url = '/pageA/privacyprotocol/privacyprotocol'
				break;
		}
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	.p_container {
		min-height: 100vh;

		.head {
			height: 230rpx;
			border-bottom-right-radius: 36rpx;
			border-bottom-left-radius: 36rpx;
			background: #F0A455;
			padding-left: 56rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
		}

		.fun_list_outside {
			padding: 0 48rpx;
			margin-top: 30rpx;

			.fun_list {
				padding: 32rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F2F2F2;

				.left {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}


	}

	:deep(.u-safe-bottom) {
		padding-bottom: 10rpx;
	}


	.agreement-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}

	.agree_content {
		padding: 30rpx;
		display: flex;
		padding-top: 0;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
		}

		text {
			display: inline-block;
			font-size: 20rpx;
		}

		.imagement {
			padding-top: 10rpx;
			padding-right: 8rpx;
			height: 80rpx;
			box-sizing: border-box;
		}

		.agreement {
			flex: 1;
			line-height: 40rpx;
			height: 80rpx;
		}


	}
</style>